<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/head-style.css">
  <link rel="stylesheet" href="css/main-style.css">
  <link rel="stylesheet" href="css/footer-style.css">
</head>
<body>
<h1>小蜜蜂宝典</h1>
<!-- 官网头部导航-->
<div class="top-nav">
  <!-- 显示导航 -->
  <div class="head-normal">
    <a class="logo" href="#">
      <img src="images/nav/logo.png">
    </a>
    
    <!--官网导航-->
    <ul class="head-nav">
      <li>
        <a href="#">
          <span class="head-nav-title">游戏资料</span>
          <span class="head-nav-subtitle">GAME INFO</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="head-nav-title">赛事官网</span>
          <span class="head-nav-subtitle">ESPORTS</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="head-nav-title">自助系统</span>
          <span class="head-nav-subtitle">SYSTEM</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="head-nav-title">社区互动</span>
          <span class="head-nav-subtitle">COMMUNITY</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="head-nav-title">商城/合作</span>
          <span class="head-nav-subtitle">STORE</span>
        </a>
      </li>
    </ul>
    <!--用户信息-->
    <div class="head-userinfo-normal">
      <div class="head-userinfo-avater">
        <img src="images/icon/default.png">
      </div>
      <div class="head-userinfo-brief">
        <p class="unlogin">亲爱的召唤师，欢迎登陆</p>
      </div>
    </div>

    <!--掌盟图标-->
    <span class="head-app-normal">
      <a href="#" class="comm-icon-phone"></a>
    </span>

    <!--搜索图标-->
    <a href="#" class="head-search-bth">
      <i class="comm-icon-search"></i>
    </a>
  </div>

  <!-- --hover:官网导航子菜单 -->
  <div class="head-nav-sub">
    <div class="head-nav-sub-inner">
      <ul class="headNavSub">
        <li>
          <a class="head-nav-sub-a" href="#">
            游戏下载
          </a>
          <a class="head-nav-sub-a" href="#">
            新手指引
          </a>
          <a class="head-nav-sub-a" href="#">
            资料库
          </a>
          <a class="head-nav-sub-a" href="#">
            云顶之弈
          </a>
          <a class="head-nav-sub-a" href="#">
            攻略中心
          </a>
          <a class="head-nav-sub-a" href="#">
            开发者基地
          </a>
          <a class="head-nav-sub-a" href="#">
            海克斯战利品库
          </a>
          <a class="head-nav-sub-a" href="#">
            英雄联盟宇宙
          </a>
        </li>
        <li>
          <a class="head-nav-sub-a" href="#">
            点卷充值
          </a>
          <a class="head-nav-sub-a" href="#">
            道聚城
          </a>
          <a class="head-nav-sub-a" href="#">
            周边商城
          </a>
          <a class="head-nav-sub-a" href="#">
            LOL桌游
          </a>
          <a class="head-nav-sub-a" href="#">
            网吧特权
          </a>
          <a class="head-nav-sub-a" href="#">
            电竞小说
          </a>
          <a class="head-nav-sub-a" href="#">
            作者入驻计划
          </a>
        </li>

        <li>
          <a class="head-nav-sub-a" href="#">
            视频中心
          </a>
          <a class="head-nav-sub-a" href="#">
            官方微信
          </a>
          <a class="head-nav-sub-a" href="#">
            官方微博
          </a>
          <a class="head-nav-sub-a" href="#">
            玩家创作馆
          </a>
          <a class="head-nav-sub-a" href="#">
            玩家服务
          </a>
          <a class="head-nav-sub-a" href="#">
            LOL组队专区
          </a>
        </li>

        <li>
          <a class="head-nav-sub-a" href="#">
            LPL职业联赛
          </a>
          <a class="head-nav-sub-a" href="#">
            LDL发展联赛
          </a>
          <a class="head-nav-sub-a" href="#">
            全球总决赛
          </a>
          <a class="head-nav-sub-a" href="#">
            城市英雄争霸赛
          </a>
          <a class="head-nav-sub-a" href="#">
            全明星赛
          </a>
          <a class="head-nav-sub-a" href="#">
            德玛西亚杯
          </a>
          <a class="head-nav-sub-a" href="#">
            全国高校联赛
          </a>
          <a class="head-nav-sub-a" href="#">
            云顶之奕公开赛
          </a>
        </li>

        <li>
          <a class="head-nav-sub-a" href="#">
            联系客服
          </a>
          <a class="head-nav-sub-a" href="#">
            转区系统
          </a>
          <a class="head-nav-sub-a" href="#">
            封号查询
          </a>
          <a class="head-nav-sub-a" href="#">
            账号注销
          </a>
          <a class="head-nav-sub-a" href="#">
            信誉分查询
          </a>
          <a class="head-nav-sub-a" href="#">
            服务器状态查询
          </a>
          <a class="head-nav-sub-a" href="#">
            秩序殿堂
          </a>
          <a class="head-nav-sub-a" href="#">
            峡谷之巅
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<!-- 官网主题部分-->
<div class="wrap">
  <div class="main">
    <video class="header-video"
           autoplay loop muted >
      <source src="video/英雄.mp4" type="video/mp4">
    </video>
    <!--   -->
    <div class="main-con">
      <p class="time">活动时间：2021年3月5号12:00 至 4月1号6:59 </p>
    </div>

    <div class="btn">
      <a href="#" class="btn-os">进入官网</a>
      <a href="#" class="btn-get">小蜜蜂宝典</a>
      <a href="#" class="btn-dl">下载游戏</a>
    </div>
  </div>
  main
</div>
<div class="footer">
  <div class="wrap_ieg">
    <p>
      <a href="#">
        腾讯互动娱乐
      </a>&nbsp; | &nbsp;
      <a href="#">
        服务条款
      </a>&nbsp; | &nbsp;
      <a href="#">
        隐私保护指南
      </a>&nbsp; | &nbsp;
      <a href="#">
        儿童隐私保护指南
      </a>&nbsp; | &nbsp;
      <a href="#">
        腾讯游戏招聘
      </a>&nbsp; | &nbsp;
      <a href="#">
        腾讯游戏客服
      </a>&nbsp; | &nbsp;
      <a href="#">
      游戏列表
      </a>&nbsp; | &nbsp;
      <a href="#">
        成长守护平台
      </a>&nbsp; | &nbsp;
      <a href="#">
        广告服务及商务合作
      </a>
    </p>

    <p>
      COPYRIGHT © 1998 – 2021 TENCENT. ALL RIGHTS RESERVED.
    </p>

    <p>
      <a href="#">
        腾讯公司 版权所有
      </a>
    </p>
  </div>
</div>
</body>
</html>